<template>
    <a-layout-content style="padding: 0 50px">
        <a-layout style="padding: 24px 0; background: #fff">
            <a-layout-content :style="{ padding: '0 24px', minHeight: '280px' }">
                <p>
                    <a-button type="primary" @click="add">添加</a-button>
                </p>
                <a-table :dataSource="brandList"
                         :columns="columns"
                         :pagination="pagination"
                         :loading="loading"
                         @change="handleTableChange"
                >
                    <template v-slot:action="{text,record}">
                        <a-button type="primary" @click="edit(record)">编辑</a-button>
                        <a-popconfirm
                                title="删除后无法恢复确认删除吗?"
                                ok-text="是"
                                cancel-text="否"
                                @confirm="del(record.id)"
                        >
                            <a-button type="danger">删除</a-button>
                        </a-popconfirm>
                    </template>
                </a-table>
            </a-layout-content>
        </a-layout>
        <a-modal v-model:visible="modelVisible"
                 title="品牌编辑表单"
                 @ok="handModelOk"
                 cancel-text="取消"
                 ok-text="确定"
        >
            <a-form
                    :model="brands"
                    :label-col="{ span: 6 }"
                    :wrapper-col="{ span: 16 }"
            >
                <a-form-item label="品牌名称">
                    <a-input v-model:value="brands.name"></a-input>
                </a-form-item>
                <a-form-item label="品牌首字母">
                    <a-input v-model:value="brands.firstChar"></a-input>
                </a-form-item>
            </a-form>
        </a-modal>
    </a-layout-content>
</template>

<script lang="ts">
    import { defineComponent, ref,onMounted } from 'vue';
    import axios from "axios";
    import {message} from "ant-design-vue";

    export default defineComponent ({
        name: "BrandList",
        components: {
        },
        setup(){
            const brandList = ref();
            const brands = ref({});
            const pagination = ref({
                current:1,
                pageSize:5,
                total:0
            });
            const columns= [
                {
                    title: '品牌id',
                    dataIndex: 'id'
                },
                {
                    title: '品牌名称',
                    dataIndex: 'name'
                },
                {
                    title: '品牌首字母',
                    dataIndex: 'firstChar'
                },
                {
                    title: '操作',
                    key:'action',
                    slots:{
                        customRender:'action'
                    }
                }
            ]
            const loading = ref<boolean>(false);
            const modelVisible = ref<boolean>(false);
            const add=()=>{
                modelVisible.value=true;
                brands.value={};
            }
            const edit=(record:any)=>{
                brands.value = JSON.parse(JSON.stringify(record)); //原数据复制一份
                modelVisible.value=true;
            }
            const del=(id:number)=>{
                axios.delete('http://localhost:8899/mall-manager/brand/deletePageById/'+id).then(reponse=>{
                    if (reponse.data.code==200){
                        //加载最新数据
                        handleQuery({
                            page:1,
                            size:pagination.value.pageSize
                        });
                    }else {
                        message.error(reponse.data.message)
                    }
                })
            }
            const handModelOk=()=>{
                axios.post('http://localhost:8899/mall-manager/brand/saveOrUpdateBrand',brands.value).then(reponse=>{
                    if (reponse.data.code==200){
                        modelVisible.value=false;
                        //加载最新数据
                        handleQuery({
                            page:1,
                            size:pagination.value.pageSize
                        });
                    }else {
                        message.error(reponse.data.message)
                    }

                })
            }
            const handleQuery =(params:any)=>{
                loading.value=true;
                axios.get("http://localhost:8899/mall-manager/brand/getBrandByPage",{
                    params:{
                        page:params.page,
                        size:params.size
                    }
                }).then((response)=>{
                    loading.value=false;
                    brandList.value=response.data.list;
                    //重置分页按钮
                    pagination.value.current=params.page;
                    pagination.value.total=response.data.total;
                })
            }
            const handleTableChange = (pagination:any)=>{
                handleQuery({
                    page:pagination.cuechange,
                    size:pagination.size
                })
            }

            onMounted(()=>{
                handleQuery({
                    page:1,
                    size:pagination.value.pageSize
                });
            })
            return{
                brandList,
                pagination,
                columns,
                loading,
                modelVisible,
                brands,
                add,
                edit,
                del,
                handModelOk,
                handleQuery,
                handleTableChange
            }
        }

    })
</script>

<style scoped>

</style>